import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { routerRedux, Link } from 'dva/router';
import {
    Row, Col, Card, Form, Input, Select, Icon, Radio,
    Button, Table, Divider, Modal, Menu, message,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

/*
流程配置-任务管理
*/
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;



@connect(({ system, risk }) => ({
    system, risk
    // loading: loading.models.rule,
}))
@Form.create()
export default class TaskList extends PureComponent {
    state = {
        modalVisible: false,
        isEdit: true,
        level: 0,
        operatorId: null,
        taskDetails: null,
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'risk/queryTaskManageList',
            payload: {
                offset: 0,
                limit: 10,
                taskState: 1,
            },
        });
    }

    columnsModal = [
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '角色', dataIndex: 'roleName', key: 'roleName' },
    ];

    handleAssignedCancel = () => {
        this.setState({
            modalVisible: false
        })
    }

    handleAssignedOK = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'risk/transferTaskList',
            payload: {
                taskId: this.state.taskDetails.taskId,
                applyId: this.state.taskDetails.id,
                operator: this.state.operatorId,
            },
            callback: () => {
                const { risk: { riskResult } } = this.props;
                if (riskResult.code == 200) {
                    message.success("提交成功")
                    this.setState({
                        modalVisible: false
                    })
                    dispatch({
                        type: 'risk/queryTaskManageList',
                        payload: {
                            offset: 0,
                            limit: 10,
                            taskState: 1,
                        },
                    });
                } else {
                    message.error(riskResult.message)
                }
            }
        });

    }

    handleCustomerSelect = record => {
        // console.log("handleCustomerSelect", record)
        this.setState({
            operatorId: record.userId,
        });
    };

    handleStandardTableChange = e => {
        this.props.dispatch({
            type: 'risk/queryTaskManageList',
            payload: {
                offset: (e.current - 1) * e.pageSize,
                limit: e.pageSize,
                taskState: 1,
            },
        });
    };

    columns = [{
        title: '业务编号',
        dataIndex: 'bizNum',
        key: 'bizNum',
        // render: (text, record, index) => {
        //     // console.log("index", index)
        //     return index + 1
        // }
    }, {
        title: '客户姓名',
        dataIndex: 'custName',
        key: 'custName',
    }, {
        title: '当前任务节点',
        dataIndex: 'taskName',
        key: 'taskName',
    }, {
        title: '当前任务负责人',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '操作',
        dataIndex: 'taskId',
        key: 'taskId',
        render: (text, record) => (
            <Fragment>
                <a onClick={() => this.handleSkipCurrent(record)}>跳过当前</a>
                <Divider type="vertical" />
                <a onClick={() => this.handleTransferClick(record)}>转签</a>
                <Divider type="vertical" />
                <a onClick={() => this.handleSendBackBusinness(record)}>退回</a>
                <Divider type="vertical" />
                <a onClick={() => this.handleStopBusinness(record)}>终止</a>
            </Fragment>
        ),
    }];

    handleSkipCurrent = (record) => {
        Modal.confirm({
            title: `是否确认跳过当前？`,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
                const { dispatch } = this.props;
                dispatch({
                    type: 'risk/jumpTaskList',
                    payload: {
                        taskId: record.taskId,
                        applyId: record.id,
                    },
                    callback: () => {
                        const { risk: { riskResult } } = this.props;
                        if (riskResult.code == 200) {
                            message.success("提交成功")
                            dispatch({
                                type: 'risk/queryTaskManageList',
                                payload: {
                                    offset: 0,
                                    limit: 10,
                                    taskState: 1,
                                },
                            });
                        } else {
                            message.error(riskResult.message)
                        }
                    }
                });
            },
        });
    }

    handleTransferClick = (record) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'risk/selectAssignor',
            payload: {
                taskId: record.taskId,
            },
            callback: () => {
                const { risk: { riskResult } } = this.props;
                if (riskResult.code == 200) {
                    this.setState({
                        taskDetails: record,
                        modalVisible: true
                    })
                } else {
                    message.error(riskResult.message)
                }
            }
        });
    }

    handleSendBackBusinness = (record) => {
        Modal.confirm({
            title: `是否确认退回？`,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
                const { dispatch } = this.props;
                dispatch({
                    type: 'risk/goBackTaskList',
                    payload: {
                        taskId: record.taskId,
                        applyId: record.id,
                    },
                    callback: () => {
                        const { risk: { riskResult } } = this.props;
                        if (riskResult.code == 200) {
                            message.success("提交成功")
                            dispatch({
                                type: 'risk/queryTaskManageList',
                                payload: {
                                    offset: 0,
                                    limit: 10,
                                    taskState: 1,
                                },
                            });
                        } else {
                            message.error(riskResult.message)
                        }
                    }
                });
            },
        });
    }

    handleStopBusinness = (record) => {
        Modal.confirm({
            title: `是否确认终止？`,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
                const { dispatch } = this.props;
                dispatch({
                    type: 'risk/stopTaskList',
                    payload: {
                        taskId: record.taskId,
                        applyId: record.id,
                    },
                    callback: () => {
                        const { risk: { riskResult } } = this.props;
                        if (riskResult.code == 200) {
                            message.success("提交成功")
                            dispatch({
                                type: 'risk/queryTaskManageList',
                                payload: {
                                    offset: 0,
                                    limit: 10,
                                    taskState: 1,
                                },
                            });
                        } else {
                            message.error(riskResult.message)
                        }
                    }
                });
            },
        });
    }

    render() {
        const { risk: { riskTaskManageList, riskPage, riskLoading, selectAssignorList, riskHomeVisitLoading } } = this.props;

        const rowSelection = {
            type: 'radio',
            onSelect: this.handleCustomerSelect,
        };

        return (
            <PageHeaderLayout title="任务列表">
                <Card bordered={false}>
                    {/* {JSON.stringify(riskTaskManageList)} */}
                    <Table
                        columns={this.columns}
                        dataSource={riskTaskManageList}
                        rowKey="id"
                        pagination={riskPage}
                        loading={riskLoading}
                        onChange={this.handleStandardTableChange}
                    >
                    </Table>
                </Card>
                <Modal
                    title="转签人员指派"
                    visible={this.state.modalVisible}
                    onCancel={this.handleAssignedCancel}
                    onOk={this.handleAssignedOK}
                >
                    <Table
                        style={{ marginTop: '10px' }}
                        size="small"
                        loading={riskHomeVisitLoading}
                        rowSelection={rowSelection}
                        columns={this.columnsModal}
                        dataSource={selectAssignorList}
                        rowKey="userId"
                        pagination={false}
                    >
                    </Table>
                </Modal>
            </PageHeaderLayout>
        );
    }


}
